<template>
  <div class="group left">
    <div class="group-row">
      <div>
        <i v-if="icon" :class="icon"></i>
        <span class="title">{{title}}</span>
      </div>
      <el-link class="more" :underline="false" type="primary" v-if="more" @click="$emit('more-click')">{{more}}</el-link>
    </div>
    <ul class="group-body">
      <li v-for="(item, i) in list" :key="i" @click="$emit('list-click', item, i)">
        <el-link type="primary">{{labelFiled ? item[labelFiled] : item}}</el-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    icon: {
      type: String,
      default: ''
    },
    title: {
      type: String,
      default: ''
    },
    more: {
      type: String,
      default: '更多>>'
    },
    labelFiled: {
      type: String,
      default: ''
    },
    list: {
      type: Array,
      default () {
        return []
      }
    }
  }
}
</script>

<style scoped lang="scss">
.group {
  border: 1px solid #e1e2e3;
  box-shadow: 0px 0px 1px 1px rgba(240,240,240, 0.6);
  border-radius: 5px;
  padding: 20px;
  box-sizing: inherit;
  &:hover {
    border: 1px solid rgba($color: $primary-color, $alpha: 0.5);
    box-shadow: 0px 0px 3px 1px rgba($color: $primary-color, $alpha: 0.5);
  }
  .group-row {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    .title {
      font-size: 18px;
      font-weight: 900;
    }
    .more {
      color: #787878;
      &:hover {
        color: $primary-color;
      }
    }
    i {
      margin-right: 10px;
    }
  }
  .group-body {
    margin: 0px;
    margin-top: 10px;
    padding-left: 25px;
    color: $primary-color;
    font-size: 16px;
    line-height: 25px;
    li {
      cursor: pointer;
    }
  }
}
</style>
